<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<% 
String basePath = request.getScheme() + "://" + request.getServerName()
		+ ":" + request.getServerPort() + request.getContextPath()
		+ "/";

request.setAttribute("basePath", basePath);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>search</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<script type="text/javascript">
		$(function(){
			var limit = 10;
			var start = 0;
			
			var loadDatas = function(qt, n){
				$.ajax({
					url:"${basePath}goodsinfo/search",
					type:"post",
					data:{"searchText":qt, "start":n, "limit":limit},
					dataType:"json",
					success:function(data){
						var datas = data.datas;
						var _html = "";
						var _caption_html = "共查询到"+data.total+"条";
						if(datas!=null && datas.length>0){
							for(var i=0;i<datas.length;i++){
								if(datas[i]==null){
									continue;
								}
								var _g = '<tr skuno="'+datas[i].skuno+'">'+
										'<td>'+datas[i].skuno+'</td>'+
										'<td><a href="'+datas[i].detailhref+'" target="_blank">'+datas[i].title+'</a></td>'+
										'<td>￥'+datas[i].price+'</td>'+
										'<td></td>'+
										'</tr>';
								_html+=_g;
							}
						}
						if(_html==""){
							_caption_html = "无数据.加载完毕";
						}
						
						$("#goodsDatasDiv > tbody").html(_html);
						$("#goodsDatasDiv > caption").html(_caption_html);
					}
				});
			};
			
			var search = function(){
				var querytext = $("#querytext").val();
				if(querytext==null || querytext==""){
					return;
				}
				var n = (start+1)*limit;
				loadDatas(querytext, n);
				$(".currentPage").html(start);
			};
			
			$("#searchBtn").on("click", function(){
				start = 1;
				search();
			});
			
			$(".nextPage").on("click", function(){
				start = start+1;
				search();
			});
			
			$(".prePage").on("click", function(){
				start = start-1;
				search();
			});

		$(document).keypress(function(e) {
				// 回车键事件  
				if (e.which == 13) {
					$("#searchBtn").click();
				}
			});
		});
	</script>
</head>
<body>
	<div style="width:800px;padding-left:100px;">
		<div class="row">
			<input id="querytext" type="text"> <button id="searchBtn" type="button" class="btn btn-default">search</button>
		</div>
		<div class="row">
			<table id="goodsDatasDiv" class="table table-striped">
			  <caption></caption>
			  <tbody></tbody>
			</table>
			
			<ul class="pagination">
			    <li><a href="#" class="prePage">&laquo;</a></li>
			    <li class="active"><a href="#" class="currentPage">1</a></li>
			    <li><a href="#" class="nextPage">&raquo;</a></li>
			</ul>
		</div>
	</div>
</body>
</html>